<template>
<div class="prd-list clear-both">
  <div :class="{'n-card':!classChange,'card':classChange}" v-for="item in prdList" @click="lookDetail(item)">
      <div class="n-card-thumb">
        <!-- <img :src="IMG_ROOT+item.img_url" class=""> -->
        <van-image
            width="100%"
            height="100%"
            fit="cover"
            radius=".106667rem"
            :src="item.img_url" />
      </div>
      <div class="n-content">
            <div class="n-card-desc " >{{item.title}} </div> 
            <div class="n-card-info" >{{item.desc}} </div>
            <div class="n-card-row" v-if="page!='shop'">
                <span class="look-num" > {{item.play_num+item.sys_play_num}} 人开通</span> 
                <div class="price text-right" >
                    <span v-if="item.price">{{item.price|tofixtwoMoney}}</span> 
                    <img src="/static/lib/img/free.png" alt="" width="40px" height="18px" style="margin-top:1px;"  v-else>
                </div>
            </div>
            <div class="n-card-row"  v-if="page=='shop'">
                <span class="price " > {{item.price|tofixtwoMoney}}</span>
                <span class="look-num " > 123购买</span>
            </div>
      </div>
  </div>
</div>

</template>

<script>

export default {
    props:{
        prdList:{
            type:Array,
            default:[]
          },

        classChange:{
            default:false
        },
        page:{
            type:String,
            default:''
        }
    },
    data(){
        return {
            IMG_ROOT:window.config.IMG_ROOT
        }
    },
    methods:{
        addCart(e,item){
            e.stopPropagation();
            this.$emit('addCart',item);
        },
        lookDetail(item){ 
            this.$router.push({ name: 'shopPageDetail',query:{section_id:item.id} });
            this.$emit('lookDetail');
        }
    }

}
</script>


<style scoped lang="scss">
.prd-list{
    .n-card{
        display: flex;
        color: #333;
        height: 3.066667rem;
        font-size: .426667rem;
        background: #fff; 
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        padding: .133333rem .32rem; 
        margin-bottom: .16rem;
        .n-card-thumb{
            flex:0 0 4rem;  
            height: 2.8rem; 
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            justify-content: center;  
            padding-right:.266667rem;
            img{
                border: none;
                width:3.4rem;
                height: 100%;
                border-radius: .133333rem;
            }
        }
        .n-content{
            flex:1; 
            position:relative;
            padding:.133333rem 0; 
            border-bottom:.013333rem solid #ececec;
            .n-card-desc{
                font-size:.373333rem;
                max-height: 1.066667rem;
                line-height:.533333rem;
                word-break: break-all;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
            }
            .n-card-info{ 
                font-size:.373333rem;
                max-height: 1.066667rem;
                line-height:.533333rem;
                word-break: break-all;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 1;
                -webkit-box-orient: vertical;
                color:#999;
            }
            .n-card-row{
                width:100%;
                position:absolute;
                bottom:.133333rem;
                display: flex;
                .price,.look-num{
                    flex:1;
                }
                .look-num{
                    font-size:.373333rem;
                    color:#999;
                }
                .price{
                    font-size:.4rem ;
                }
            }
        }
    }

    .card{
        width:50%;
        height:5.733333rem;
        float:left;
        padding:.266667rem .266667rem .4rem .266667rem ;
        margin-bottom:.08rem;
        box-sizing:border-box;
        // border:.013333rem solid #ececec;
        background: #fff;
        .n-card-thumb{
            width:100%;
            height:3.466667rem;
            display: flex;
            img{
                display:block;
                border: none;
                max-width:100%;
                max-height:100%;
                margin:auto;
            }
        }
        .n-content{
            margin-top:.266667rem;
            padding:0 .266667rem ;
            .n-card-desc{
                font-size:.373333rem;
                max-height: 1.066667rem;
                line-height:.533333rem;
                word-break: break-all;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 1;
                -webkit-box-orient: vertical;
            }
            .n-card-info{
                display: none;
            }
            .n-card-row{
                margin-top:.266667rem;
                display: flex;
                align-items: center;
                span{
                    flex:1;
                }
                .look-num{
                    color:#333;
                    font-size: .266667rem;
                }
            }
        }
    }
}

 
.price{
    font-size:.373333rem;
    color:#e4393c;
    width: 80%;
    display: inline-block;
}
.prd-cart{
    font-size:.5rem;
    font-weight:bold;
    color:#e4393c;
    margin-right:.266667rem;
}
</style>
